<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>web权限列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <el-button type="primary" size="mini" @click="handleDrawer('添加')">Add</el-button>
      <hr>
      <el-table :data="tableData" style="width: 100%"
                row-key="web_id"
                border
      >
        <el-table-column prop="web_id" label="##"/>
        <el-table-column prop="web_content" label="描述"/>
        <el-table-column prop="web_icon" label="图标" >
          <template #default="props">
            <i :class="props.row.web_icon"></i>
          </template>
        </el-table-column>
        <el-table-column prop="web_sort" label="排序"/>
        <el-table-column prop="web_path" label="请求地址"/>
        <el-table-column prop="web_to" label="静态地址"/>
        <el-table-column prop="web_statu" label="状态">
          <template #default="props">
            <el-tag size="mini" type="success" v-if="props.row.web_statu === 1">启用</el-tag>
            <el-tag size="mini" type="warning" v-if="props.row.web_statu === 2">禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="props">
            <el-button type="primary" @click="handleDrawer(props.row)" size="mini">Edit</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--添加/修改-->
      <el-drawer
          v-model="drawer"
          :title="title===1?'添加':'更新'"
          direction="rtl"
          :before-close="handleClose"
      >

        <el-form ref="form" :model="datainfo" label-width="120px">
          <el-form-item label="名称">
            <el-input v-model="datainfo.web_content"></el-input>
          </el-form-item>
          <el-form-item label="上级">
            <el-select v-model="datainfo.web_pid" placeholder="Select" clearable>
              <el-option label="顶级菜单" :value="0"></el-option>
              <el-option
                  v-for="item in tableData"
                  :key="item.web_id"
                  :label="item.web_content"
                  :value="item.web_id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="请求地址">
            <el-input v-model="datainfo.web_path"  placeholder="请求地址"></el-input>
          </el-form-item>
          <el-form-item label="静态地址">
            <el-input v-model="datainfo.web_to" placeholder="静态地址"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-radio v-model="datainfo.web_statu" :label="1">启用</el-radio>
            <el-radio v-model="datainfo.web_statu" :label="2">禁用</el-radio>
          </el-form-item>
          <el-form-item label="图标">
            <el-input v-model="datainfo.web_icon" placeholder="图标">
              <template #append>
                <a target="_blank" href="https://element.eleme.cn/#/zh-CN/component/icon">
                  <el-button icon="el-icon-search"></el-button>
                </a>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="排序">
            <el-input-number v-model="datainfo.web_sort" placeholder="排序"></el-input-number>
          </el-form-item>
          <el-form-item>
            <el-button type="primary"  @click="save">{{ title===1?"Create":"Update" }}</el-button>
          </el-form-item>
        </el-form>

      </el-drawer>

    </el-card>
  </div>
</template>

<script>
import {onMounted, reactive, toRefs} from "vue";
import {ElMessage} from "element-plus";
import axios from "axios";

export default {
  setup() {
    const state = reactive({
      tableData: [],

      selectData: [],
      cascaderValue: [],
      datainfo: {},
      options: [],
      drawer: false,
      title: 1,
    })
    onMounted(() => {
      GetData()
    })
    //
    const GetData = async () => {
      const {data: res} = await axios.get('route/web')
      if (res.code !== 1000) return ElMessage.error(res.msg)
      state.tableData = res.data
    }
    //处理数据
    //编辑
    const handleDrawer = (data) => {
      state.drawer = true
      if (data === '添加') {
        state.datainfo = {}
      } else {
        state.title = 2
        state.datainfo = data
      }
    }
    const handleClose = () => {
      state.drawer = false
    }

    //添加/更新
    const save = async () => {
      if (state.title === 1){
        const {data: res} = await axios.put('route/web', state.datainfo)
        if (res.code !== 1000) return ElMessage.error(res.msg)
        ElMessage.success(res.msg)
      }else {
        const {data: res} = await axios.post('route/web', state.datainfo)
        if (res.code !== 1000) return ElMessage.error(res.msg)
        ElMessage.success(res.msg)
      }
      GetData()
    }
    return {
      ...toRefs(state),
      GetData,
      save,
      handleDrawer,
      handleClose,
    }
  }
}
</script>

<style scoped>

</style>
